<template>
    <div id="temp">
        <div class="container-fluid">
            <!-- 栅格系统菜单展示栏 -->
            <div class="row">
                <div class="item item1">
                    <span class="fl glyphicon glyphicon-yen"></span>
                    <div class="right fl">
                        <p>我的收入</p>
                        <p>￥11.1</p>
                    </div>
                </div>
                <div class="item item2">
                    <span class="glyphicon glyphicon-th fl"></span>
                    <div class="right fl">
                        <p>课程数量</p>
                        <p>12</p>
                    </div>
                </div>
                <div class="item item3">
                    <span class="glyphicon glyphicon-user fl"></span>
                    <div class="right fl">
                        <p>用户数量</p>
                        <p>236</p>
                    </div>
                </div>
                <div class="item item4">
                    <span class="glyphicon glyphicon-eye-open fl"></span>
                    <div class="right fl">
                        <p>浏览量</p>
                        <p>22435</p>
                    </div>
                </div>
            </div>
            <!-- echarts柱形图 -->
            <div id="echarts">
                <div id="main"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {

            }
        },
        mounted() {
            this.paint();
        },
        methods: {
            paint() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '课程数量'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: ["Html", "Css", "Mobile", "Angular", "Vue", "Nodejs"]
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    }
</script>
<style scoped lang="less">
    #temp {
        width: 100%;
        padding: 20px 10px;
        #echarts {
            width: 100%;
            padding:30px 0 0 20px;
            background-color: #fff !important;
            #main {
                width: 600px;
                height: 400px;
            }
        }
        .container-fluid {
            .row {
                margin-bottom: 20px;
                min-width: 720px;
                display: flex;
                .item {
                    flex: 1;
                    display: flex;
                    border-radius: 5px;
                    margin: 0 15px;
                    color: #fff;
                    span {
                        width: 60px;
                        height: 80px;
                        font-size: 50px;
                        line-height: 80px;
                        text-align: center;
                        margin-left:10px;
                    }
                    div {
                        height: 80px;
                        flex: 1;
                        padding: 20px 0 0 10px;
                        p {
                            line-height: 25px;
                        }
                    }
                }
                .item1{
                    background-color: #FC8675;
                }
                .item2{
                    background-color: #5AB6DF;
                }
                .item3{
                    background-color: #65CEA7;
                }
                .item4{
                    background-color: #EBC85E;
                }
            }
        }
    }
</style>